<template>
  <div class="p-3">
    <div class="appBox p-4 pt-0">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="批量发货" name="first">
          <div class="fisTitle">上传文件</div>
          <div class="line mt-1"></div>
          <div class="dowBox pl-20">
            <div class="up mt-5">立即上传</div>
            <div class="d-tip mt-2">仅支持csv、xls、xlsx格式文件</div>
            <div class="link mt-3">
              <div class="item">
                <svg-icon icon-class="dowUp" size="14px" />
                下载模板
              </div>
              <div class="item ml-5">
                <svg-icon icon-class="dowUp" size="14px" />
                下载物流公司编码
              </div>
            </div>
          </div>
          <div class="line mt-4"></div>
          <el-form class="mt-6">
            <el-row :gutter="30">
              <el-col :span="8" :xs="24">
                <el-form-item label="订单编号" :model="form" label-width="auto" style="width: 100%">
                  <el-input placeholder="输入订单编号" />
                </el-form-item>
              </el-col>
              <el-col :span="8" :xs="24">
                <el-form-item label="物流单号" :model="form" label-width="auto" style="width: 100%">
                  <el-input placeholder="输入物流编号" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div style="display: flex; justify-content: center">
                  <div class="reset">重置</div>
                  <div class="search ml-10">查询</div>
                </div>
              </el-col>
            </el-row>
          </el-form>
          <div class="tab pl-7">
            <div class="item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
              待发货(990)
            </div>
            <div class="item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
              已发货(0)
            </div>
            <div class="item" :class="{ active: tabIndex == 2 }" @click="tabIndex = 2">
              发货失败(0)
            </div>
          </div>
          <div class="line"></div>
          <div class="totalBox">
            <div class="total">共990条</div>
            <div class="shu ml-5"></div>
            <div class="allbtn ml-5">批量发货</div>
            <div class="allbtn ml-5">批量导出</div>
          </div>
          <el-table :data="pageData" ref="table" empty-text="暂无数据" class="orderData" :header-cell-style="{
            backgroundColor: '#f2f4f9',
            fontSize: '14px',
            color: '#333',
          }">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="订单编号" width="350">
              <template #default="scope">
                <div>
                  78894564564211156
                  <svg-icon icon-class="copy" style="cursor: pointer" />
                </div>
              </template>
            </el-table-column>

            <el-table-column label="物流公司" prop="wl" width="220" />

            <el-table-column label="物流单号" width="350">
              <template #default="scope">
                <div>
                  JT78894564564211156
                  <svg-icon icon-class="copy" style="cursor: pointer" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="发货状态" prop="module" width="220">
              <template #default="scope">
                <div>未发货</div>
              </template>
            </el-table-column>
            <el-table-column label="处理结果">
              <template #default="scope">
                <div v-if="scope.row.state == 0">-</div>
                <div v-if="scope.row.state == 1" style="color: #ff4c4c">
                  订单正在售后中，请确认后发货
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex; justify-content: center">
            <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
              v-model:limit="queryParams.pageSize" layout="total,  prev, pager, next,sizes, jumper" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="待打单" name="second">待打单
          <el-button plain @click="modalPic = true">
            Click to open the Dialog
          </el-button>

        </el-tab-pane>
        <el-tab-pane label="待发货" name="third">待发货</el-tab-pane>
        <el-tab-pane label="已发货" name="fourth">已发货</el-tab-pane>
        <el-tab-pane label="物流异常" name="wu">物流异常</el-tab-pane>
      </el-tabs>
      <el-dialog v-model="modalPic" width="950px" scrollable title="上传商品图" :close-on-click-modal="false">
        <upload-pictures>11</upload-pictures>
      </el-dialog>
    </div>
  </div>
</template>
<script setup lang="ts">
const gridBtn = ref({
  xl: 4,
  lg: 8,
  md: 8,
  sm: 8,
  xs: 8,
})
const gridPic = ref(
  {
    xl: 6,
    lg: 8,
    md: 12,
    sm: 12,
    xs: 12,
  }
)
const isChoice = ref('')
const modalPic = ref(false)
const activeName = ref("first");
const total = ref(980);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
});
const tabIndex = ref(0);

const form = ref([]);
const pageData = ref([
  { wl: "极兔快递", state: 0 },
  { wl: "极兔快递", state: 0 },
  { wl: "极兔快递", state: 1 },
  { wl: "极兔快递", state: 0 },
  { wl: "极兔快递", state: 0 },
]);
</script>
<style lang="scss" scoped>
.totalBox {
  padding: 20px 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333333;

  .shu {
    width: 1px;
    height: 36px;
    background-color: #d3d9dd;
  }

  .allbtn {
    width: 84px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #d3d9dd;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.tab {
  display: flex;

  .item {
    margin-right: 30px;
    font-size: 14px;
    color: #333333;
    padding-bottom: 2px;
    cursor: pointer;
  }

  .active {
    border-bottom: 4px solid #1f75ec;
  }
}

.reset {
  cursor: pointer;
  width: 114px;
  height: 36px;
  border-radius: 4px;
  background-color: #d3d9dd;
  font-size: 14px;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search {
  cursor: pointer;
  width: 114px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  background-color: #1f75ec;
}

.dowBox {
  .up {
    width: 84px;
    height: 36px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-color: #2176ec;
    font-size: 14px;
    color: #fff;
  }

  .d-tip {
    font-size: 14px;
    color: #6c6c6c;
  }

  .link {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #1f75ec;

    .item {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}

.appBox {
  background-color: #fff;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

:deep .demo-tabs .el-tabs__nav-wrap::after {
  content: none;
}

.fisTitle {
  font-size: 16px;
  color: "#333333";
}

.line {
  width: 100%;
  height: 1px;
  background-color: #dbdbdb;
}
</style>
